<template>
    <p>这是Home页</p>
    <h1>JS跳转</h1>
    <button @click="pushStr">path-字符串-跳转</button>
    <button @click="pushPath">path-path-跳转</button>
    <button @click="pushName">path-name-跳转</button>
    <button @click="pushNameParams">path-name-跳转-params</button>
    <button @click="pushNameQuery">path-path-跳转-query</button>
    <button @click=" pushDynRouteByName">push-push-动态路由</button>
    <button @click=" pushDynRouteByPath">push-push-动态路由</button>


</template>

<script>
export default {
    methods:{
        pushStr(){
            this.$router.push('./about')
        },
        pushPath(){
            this.$router.push({path:'/about'})
            
        },
        pushName (){
            this.$router.push({name:'about'})
        },
        pushNameParams(){
            this.$router.push({name:'about',state:{params:{id:1,name:'tom'}}})
        },
        pushNameQuery(){
            this.$router.push({path:'/about', query:{id:1,name:'tom'}})
        },
        pushDynRouteByName(){
this.$router.push({name:'product',params:{id:123}})
        },
        pushDynRouteByPath(){
const id = 123
this.$router.push({path:'/product'+'/'+id})
        },
    },
    mounted() {//加载完之后
        console.log("this.$route,this.$route");
        console.log("this.$router,this.$route");

    }
}
</script>